
import { useState } from 'react'
import Card from '../../ui/Card/Card'
import './LogItem.css'
import MyDate from './MyDate'
import ConfirmModal from '../../ui/ConfirmModal/ConfirmModal'

const LogItem = (props) => {

    const [showConfirm, setShowConfirm] = useState(false)

    const deleteLogHandler = () => {
        setShowConfirm(true)
    }

    const cancelHandler = () => {
        setShowConfirm(false)
    }

    const confirmHandler = ()=>{
        props.delLog()
    }

    return <Card className='logItem'>
        {showConfirm && <ConfirmModal onConfirm={confirmHandler} onCancel={cancelHandler} text="确定要删除吗？" />}
        <MyDate date={props.date} />
        <div className="content">
            <h2 className="desc">{props.desc}</h2>
            <div className="time">{props.time}分钟</div>
        </div>
        <div>
            <div onClick={deleteLogHandler} className='del-log'>×</div>
        </div>
    </Card>
}

export default LogItem